<script setup lang="ts">
import axios from 'axios'
// 获取我的评价
const myReviewForm = ref([
  {
    reviewid: 1,
    orderid: 1,
    review: '',
    point: 1,
    image: 'https://hiram.oss-cn-chengdu.aliyuncs.com/coffee.jpg',
    reply: null,
    createtime: '2024-04-28 15:43:01'
  }
])
// 获取评价
const getMyReview = () => {
  axios({
    method: 'post',
    url: 'http://localhost:8080/review/getallbyuserid',
    params: {
      userid: window.localStorage.getItem('userID')
    },
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('Usertoken')
    }
  }).then(
    (res) => {
      myReviewForm.value = res.data.data
      console.log(res)
    },
    (err) => {
      ElMessage.error('查看评论失败,请刷新网页')
      console.log(err)
    }
  )
}
getMyReview()
const colors = ref(['#99A9BF', '#F7BA2A', '#FF9900'])
</script>

<template>
  <el-card style="width: 98%">
    <template #header>
      <div class="card-header">
        <span>我的评论</span>
      </div>
    </template>

    <div class="cards-container">
      <div v-for="p in myReviewForm" :key="p.reviewid" class="text item">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <div style="display: flex; justify-content: space-between; align-items: center">
                <span>评论id{{ p.reviewid }}</span>
                <span>订单id:{{ p.orderid }}</span>
              </div>
              <el-tag type="warning" effect="light" size="large" style="margin-top: 15px">{{
                p.createtime
              }}</el-tag>
              <!-- <p style="margin-top: 20px;">{{ p.createtime }}</p> -->
            </div>
          </template>
          <img :src="p.image" alt="" style="width: 190px; height: 200px" />
          <div style="height: 200px; overflow: auto">
            <div style="display: flex; justify-content: space-between; align-items: center">
              <p style="margin-bottom: 20px; margin-top: 20px">评分: {{ p.point }}分</p>
              <el-rate v-model="p.point" :colors="colors" />
            </div>

            <p style="margin-top: 20px; margin-bottom: 40px">评论内容: {{ p.review }}</p>
            <p style="margin-top: 20px">商家回复: {{ p.reply }}</p>
          </div>
        </el-card>
      </div>
    </div>
    <template #footer> 没有更多评论了... </template>
  </el-card>
</template>

<style lang="scss" scoped>
.cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  /* 设置子元素之间的间隔 */
}

.text.item {
  flex: 0 0 calc(20% - 20px);
  /* 设置每个el-card的固定宽度 */
  max-width: calc(20% - 20px);
  /* 设置每个el-card的最大宽度，减去间隔 */
  height: 580px;
  /* 设置每个el-card的固定高度 */
  margin-bottom: 5px;
  /* 添加下边距 */
  overflow: auto;
  /* 如果内容溢出，则显示滚动条 */
}

/* 如果需要，移除最后一个元素的底部边距 */
.text.item:last-child {
  margin-bottom: 0;
}
</style>
